/**
 * 我的页面JavaScript功能
 * 实现登录、登出、剪辑记录查看等功能
 */

// 全局变量
let currentUser = null;
let editRecords = [];

// DOM元素
const userCard = document.getElementById('user-card');
const loginPrompt = document.getElementById('login-prompt');
const userInfo = document.getElementById('user-info');
const showLoginBtn = document.getElementById('show-login');
const logoutBtn = document.getElementById('logout-btn');
const userName = document.getElementById('user-name');
const loginModal = document.getElementById('login-modal');
const loginForm = document.getElementById('login-form');
const confirmLoginBtn = document.getElementById('confirm-login');
const cancelLoginBtn = document.getElementById('cancel-login');
const closeLoginBtn = document.getElementById('close-login');
const editRecordsMenu = document.getElementById('edit-records-menu');
const recordsSection = document.getElementById('records-section');
const backToMenuBtn = document.getElementById('back-to-menu');
const recordsList = document.getElementById('records-list');
// 语言相关DOM元素已删除

// 语言配置已删除

/**
 * 初始化页面功能
 */
function initializePage() {
    setupLoginModal();
    setupMenuActions();
    setupUserManager();
}

/**
 * 设置登录模态框功能
 */
function setupLoginModal() {
    showLoginBtn.addEventListener('click', showLoginModal);
    confirmLoginBtn.addEventListener('click', handleLogin);
    cancelLoginBtn.addEventListener('click', hideLoginModal);
    closeLoginBtn.addEventListener('click', hideLoginModal);
    logoutBtn.addEventListener('click', handleLogout);
    
    // 点击模态框外部关闭
    loginModal.addEventListener('click', (e) => {
        if (e.target === loginModal) {
            hideLoginModal();
        }
    });
    
    // 表单提交处理
    loginForm.addEventListener('submit', (e) => {
        e.preventDefault();
        handleLogin();
    });
    
    // 设置键盘快捷键
    setupLoginKeyboardShortcuts();
}

/**
 * 设置登录模态框键盘快捷键
 */
function setupLoginKeyboardShortcuts() {
    // 为用户名和密码输入框添加回车键监听
    const usernameInput = document.getElementById('username');
    const passwordInput = document.getElementById('password');
    
    // 回车键登录
    const handleEnterKey = (e) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            handleLogin();
        }
    };
    
    usernameInput.addEventListener('keydown', handleEnterKey);
    passwordInput.addEventListener('keydown', handleEnterKey);
    
    // ESC键清除表单并聚焦到用户名输入框
    const handleEscapeKey = (e) => {
        if (e.key === 'Escape') {
            e.preventDefault();
            // 清空表单
            usernameInput.value = '';
            passwordInput.value = '';
            // 聚焦到用户名输入框
            usernameInput.focus();
        }
    };
    
    // 为整个模态框添加ESC键监听
    loginModal.addEventListener('keydown', handleEscapeKey);
}

/**
 * 设置菜单操作功能
 */
function setupMenuActions() {
    editRecordsMenu.addEventListener('click', showEditRecords);
    backToMenuBtn.addEventListener('click', hideEditRecords);
    
    // 其他菜单项的点击处理
    document.getElementById('settings-menu').addEventListener('click', () => {
        showToast('设置功能开发中...', 'info');
    });
    
    document.getElementById('help-menu').addEventListener('click', () => {
        showToast('帮助功能开发中...', 'info');
    });
}

/**
 * 设置语言切换功能
 */
// setupLanguageToggle函数已删除

/**
 * 显示登录模态框
 */
function showLoginModal() {
    loginModal.classList.add('show');
    // 自动聚焦到用户名输入框
    setTimeout(() => {
        document.getElementById('username').focus();
    }, 100);
}

/**
 * 隐藏登录模态框
 */
function hideLoginModal() {
    loginModal.classList.remove('show');
    loginForm.reset();
}

/**
 * 处理登录功能
 */
async function handleLogin() {
    const username = document.getElementById('username').value.trim();
    const password = document.getElementById('password').value.trim();
    
    if (!username || !password) {
        showToast('请输入用户名和密码', 'error');
        return;
    }
    
    try {
        confirmLoginBtn.classList.add('loading');
        confirmLoginBtn.textContent = '登录中...';
        
        const result = await window.userManager.login(username, password);
        
        if (result.success) {
            hideLoginModal();
            showToast('登录成功！', 'success');
            // 用户状态会通过userManager的监听器自动更新
        } else {
            showToast(result.message || '登录失败', 'error');
        }
    } catch (error) {
        console.error('登录失败:', error);
        showToast('网络错误，请重试', 'error');
    } finally {
        confirmLoginBtn.classList.remove('loading');
        confirmLoginBtn.textContent = '登录';
    }
}

/**
 * 处理登出功能
 */
async function handleLogout() {
    try {
        const result = await window.userManager.logout();
        
        if (result.success) {
            showToast('已退出登录', 'success');
            // 用户状态会通过userManager的监听器自动更新
        }
    } catch (error) {
        console.error('登出失败:', error);
        showToast('登出失败', 'error');
    }
}

/**
 * 设置用户管理器
 */
function setupUserManager() {
    // 监听用户状态变化
    window.userManager.onUserChange((user) => {
        currentUser = user;
        updateUserDisplay();
    });
    
    // 初始化用户状态
    currentUser = window.userManager.getCurrentUser();
    updateUserDisplay();
}

/**
 * 检查用户登录状态
 */
async function checkUserStatus() {
    try {
        const user = await window.userManager.checkStatus();
        currentUser = user;
        updateUserDisplay();
    } catch (error) {
        console.error('检查用户状态失败:', error);
    }
}

/**
 * 更新用户显示状态
 */
function updateUserDisplay() {
    if (currentUser && currentUser.isLoggedIn) {
        loginPrompt.style.display = 'none';
        userInfo.style.display = 'flex';
        userName.textContent = currentUser.username;
    } else {
        loginPrompt.style.display = 'block';
        userInfo.style.display = 'none';
    }
}

/**
 * 显示剪辑记录
 */
async function showEditRecords() {
    if (!currentUser) {
        showToast('请先登录', 'error');
        showLoginModal();
        return;
    }
    
    try {
        const response = await fetch('/api/edit-records');
        const records = await response.json();
        
        if (response.ok) {
            editRecords = records;
            renderEditRecords();
            
            // 隐藏菜单，显示记录
            document.querySelector('.menu-section').style.display = 'none';
            recordsSection.style.display = 'block';
        } else {
            showToast(records.error || '获取记录失败', 'error');
        }
    } catch (error) {
        console.error('获取剪辑记录失败:', error);
        showToast('网络错误，请重试', 'error');
    }
}

/**
 * 隐藏剪辑记录
 */
function hideEditRecords() {
    document.querySelector('.menu-section').style.display = 'block';
    recordsSection.style.display = 'none';
}

/**
 * 渲染剪辑记录列表
 */
function renderEditRecords() {
    const emptyState = document.getElementById('empty-records');
    
    if (editRecords.length === 0) {
        emptyState.style.display = 'block';
        return;
    }
    
    emptyState.style.display = 'none';
    
    const recordsHTML = editRecords.map(record => `
        <div class="record-item">
            <div class="record-header">
                <div>
                    <h3 class="record-title">${record.title}</h3>
                    <p class="record-date">${record.created_at}</p>
                </div>
            </div>
            <div class="record-details">
                <p>片头：${getIntroDisplayName(record.intro)}</p>
                <p>模板：${getTemplateDisplayName(record.template)}</p>
            </div>
        </div>
    `).join('');
    
    recordsList.innerHTML = recordsHTML + '<div class="empty-state" id="empty-records" style="display: none;"><i class="fas fa-video"></i><p>还没有剪辑作品</p><p>去主页开始创作吧！</p></div>';
}

// toggleLanguage函数已删除

// updateLanguageDisplay函数已删除

// saveLanguagePreference函数已删除

// loadLanguagePreference函数已删除

// showLanguageToast函数已删除

/**
 * 获取片头显示名称
 */
function getIntroDisplayName(intro) {
    const names = {
        'modern': '现代风格',
        'classic': '经典风格',
        'dynamic': '动感风格',
        'minimal': '极简风格'
    };
    return names[intro] || intro;
}

/**
 * 获取模板显示名称
 */
function getTemplateDisplayName(template) {
    const names = {
        'vlog': 'Vlog模板',
        'travel': '旅行模板',
        'food': '美食模板',
        'music': '音乐模板'
    };
    return names[template] || template;
}

/**
 * 显示提示消息
 */
function showToast(message, type = 'info') {
    // 移除现有的toast
    const existingToast = document.querySelector('.toast.show');
    if (existingToast && !existingToast.id) {
        existingToast.remove();
    }
    
    // 创建新的toast
    const toast = document.createElement('div');
    toast.className = `toast ${type}`;
    toast.innerHTML = `<span>${message}</span>`;
    
    document.body.appendChild(toast);
    
    // 显示toast
    setTimeout(() => {
        toast.classList.add('show');
    }, 100);
    
    // 自动隐藏toast
    setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => {
            if (toast.parentNode) {
                toast.parentNode.removeChild(toast);
            }
        }, 300);
    }, 3000);
}

/**
 * 添加触摸反馈效果
 */
function addTouchFeedback() {
    const interactiveElements = document.querySelectorAll('.menu-item, .btn, .nav-item');
    
    interactiveElements.forEach(element => {
        element.addEventListener('touchstart', () => {
            element.style.transform = 'scale(0.95)';
        });
        
        element.addEventListener('touchend', () => {
            setTimeout(() => {
                element.style.transform = '';
            }, 150);
        });
    });
}

/**
 * 页面加载完成后初始化
 */
document.addEventListener('DOMContentLoaded', () => {
    initializePage();
    addTouchFeedback();
    
    // 添加页面加载动画
    document.body.classList.add('fade-in');
    

});

// 页面可见性变化处理已移至userManager

/**
 * 导出功能供其他脚本使用
 */
window.profilePageUtils = {
    showToast,
    checkUserStatus,
    currentUser: () => currentUser
};